<template>
  <div class="page gray-page">
    <nav-bar title="基础信息记录"></nav-bar>
    <div class="list-main page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.recordType" class="van-hairline--bottom" @click="getList(1)">
          <van-tab v-for="(item, key) in tabOptions" :key="key" :title="item.description" :name="item.code"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky :offset-top="88">
        <van-tabs v-model="searchForm.baseType" line-height="0" swipe-threshold="3" @click="getList(1)">
          <van-tab v-for="(item, key) in tabOptions[searchForm.recordType].children" :key="key" :name="item.code">
            <template #title>
              <van-tag
                v-if="searchForm.baseType === item.code"
                type="primary"
                round
                plain
                size="large"
                style="background-color: rgba(60, 189, 208, 0.1)"
              >
                {{ item.description }}
              </van-tag>
              <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
                {{ item.description }}
              </van-tag>
            </template>
          </van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="140">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <gb-card
                border
                class="list-item"
                v-for="(item, key) in listData"
                :key="key"
                :color="baseColor[searchForm.baseType]"
                :affix-icon="
                  item.approveState === '2' && searchForm.recordType === '2'
                    ? require('@/assets/images/resident/basic/icon_affix_reject@2x.png')
                    : ''
                "
              >
                <item-template
                  :item="item"
                  :baseType="searchForm.baseType"
                  :queryType="searchForm.recordType"
                  type="Record-detail"
                ></item-template>
              </gb-card>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import List from '@/mixins/list'
import Resident from '@/api/resident'
import ItemTemplate from '@/components/Widget/Resident/List/template'
export default {
  mixins: [List],
  components: {
    ItemTemplate
  },
  data() {
    return {
      tabOptions: {
        1: {
          code: '1',
          description: '更新记录',
          children: [
            {
              code: '1',
              description: '本地人员'
            },
            {
              code: '2',
              description: '非本地人员'
            },
            {
              code: '3',
              description: '境外人员'
            },
            // {
            //   code: '4',
            //   description: '特殊人群'
            // },
            // {
            //   code: '5',
            //   description: '关爱人员'
            // },
            // {
            //   code: '6',
            //   description: '重点青少年'
            // },
            {
              code: '7',
              description: '房屋信息'
            },
            {
              code: '8',
              description: '车辆信息'
            },
            {
              code: '9',
              description: '宠物信息'
            },
            {
              code: '10',
              description: '单位信息'
            }
          ]
        },
        2: {
          code: '2',
          description: '审核记录',
          children: [
            {
              code: '1',
              description: '本地人员'
            },
            {
              code: '2',
              description: '非本地人员'
            },
            {
              code: '3',
              description: '境外人员'
            },
            {
              code: '8',
              description: '车辆信息'
            },
            {
              code: '9',
              description: '宠物信息'
            }
          ]
        },
        3: {
          code: '3',
          description: '采集记录',
          children: [
            {
              code: '1',
              description: '本地人员'
            },
            {
              code: '2',
              description: '非本地人员'
            },
            {
              code: '3',
              description: '境外人员'
            },
            {
              code: '8',
              description: '车辆信息'
            },
            {
              code: '9',
              description: '宠物信息'
            },
            {
              code: '10',
              description: '单位信息'
            },
            {
              code: '13',
              description: '组织信息'
            },
            {
              code: '14',
              description: '党组织信息'
            }
          ]
        }
      },
      baseColor: {
        1: '#3CBDD0',
        2: '#37C2BB',
        3: '#E28556',
        4: '#E2AB56',
        5: '#E25656',
        6: '#E28556',
        7: '#3B71DA',
        8: '#37C2BB',
        9: '#E2AB56',
        10: '#3B99DA'
      },
      searchForm: {
        recordType: this.$route.query.recordType,
        baseType: '1',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      api: Resident.Record
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleLabelClick(item) {
      this.searchForm.baseType = item.code
      this.getList(1)
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
</style>
